@import "../color.less";
@prefix: dy-table;

.@{prefix} {
  table {
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    color: @dy-table-fontcolor;

    .table-border {
      border: 1px solid @dy-table-bgcolor !important;
    }

    thead {
      width: 100%;
      background-color: @dy-navigation-bgcolor;
      background-image: linear-gradient(to bottom, @dy-navigation-bgcolor 20%, #a3b9c7 60%, @dy-navigation-bgcolor 100%);
      box-sizing: border-box;
      color: #fff;
      box-shadow: 0px 2px 2px #4b555d;
      tr {
        th {
          position: relative;
          text-align: center;
          vertical-align: middle;
          padding: 8px;
        }
      }
    }

    tbody {
      width: 100%;
      background-color: #fff;

      tr {
        width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;

        &:nth-of-type(even) {
          background: @dy-table-bgcolor;

          &:hover {
            background-color: @dy-table-hovercolor;
            color: #fff;
            .dy-angle-right {
              color: #fff;
            }
          }
        }

        &:nth-of-type(odd) {
          background: #fff;

          &:hover {
            background-color: @dy-table-hovercolor;
            color: #fff;
            .dy-angle-right {
              color: #fff;
            }
          }
        }

        td {
          text-align: center;
          vertical-align: middle;
          padding: 8px;
          box-sizing: border-box;
          position: relative;
          line-height: 25px;
          .dy-angle-right {
            position: absolute;
            left: 0;
            top: 50%;
            transition: transfrom 0.3s;
            margin-top: -12.5px;
            font-size: 16px;
            margin-right: 5px;
            color: @dy-table-hovercolor;
            &:hover {
              color: #fff;
            }
          }
        }
      }

      .activatedTr {
        background-color: @dy-table-hovercolor !important;
        color: #fff;
        .dy-angle-right {
          color: #fff;
        }
      }
    }
  }
}
